<template>
    <div>
        <el-sub-menu v-if="hasChildren" :index="model.name">
            <template #title>
                <span>{{ model.name }}</span>
            </template>
            <template #default>
                <MenuItem v-for="item in model.children" :model="item" />
            </template>
        </el-sub-menu>
        <el-menu-item v-else :index="model.name">
            <span>{{ model.name }}</span>
        </el-menu-item>

    </div>
</template>

<script>

export default {
    name: "MenuItem",
    props: ["model"],
    computed: {
        hasChildren() {
            return this.model.children && this.model.children.length > 0
        }
    }
}
</script>